
<script>
import classnames from 'classnames';
import Icon from '@/components/icon';
import './index.less';
// static defaultProps = {
//   prefixCls: 'am-card',
//   full: false,
// };

// static Header = CardHeader;
// static Body = CardBody;
// static Footer = CardFooter;
export default {
  name: 'Card',
  components: {
    Icon,
  },
  props: {
    prefixCls: {
      type: String,
      default: 'je-card',
    },
    full: {
      type: Boolean,
      default: false,
    },
    /*
    * 仅有头部
    */
    onlyHeader: {
      type: Boolean,
      default: false,
    },
    /*
    * 隐藏头部
    */
    hideHeader: {
      type: Boolean,
      default: false,
    },
    /*
    * 隐藏外边框
    */
    unborder: {
      type: Boolean,
      default: false,
    },
    /*
    * 隐藏外边框
    */
    unpadding: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    /**
     * card header 左侧图标
     */
    type: {
      type: String,
      default: '',
    },
    /**
     * card header 左侧图标大小
     */
    size: {
      type: String,
      default: 'xs',
    },
    /**
     * card header 左侧图标大小
     */
    color: {
      type: String,
      default: '',
    },
  },
  methods: {
    handleExtraClick() {
      this.$emit('extraClick');
    },
    handleHeaderClick() {
      this.$emit('headerClick');
    },
  },
  render() {
    const {
      prefixCls, full, className, title, type, size, color, onlyHeader, hideHeader, unborder, unpadding,
    } = this.$props;
    const wrapCls = classnames(prefixCls, className, {
      [`${prefixCls}-full`]: full,
      [`${prefixCls}-unborder`]: unborder,
      [`${prefixCls}-unpadding`]: unpadding,
    });
    const {
      footer, footerExtra, header, headerExtra, default: def, slotTitle,
    } = this.$slots;
    // 支持自定义头部
    return <div class={wrapCls}>
    {
      !hideHeader && (
       <div class={`${prefixCls}-header`} >
          <div class={`${prefixCls}-header-content`}>
            {
              header && header
            }

            {
              type
              && <Icon type={type} size={size} style={`color: ${color}`}/>
            }

            {
              (title || slotTitle)
              && <div class={`${prefixCls}-header-title`} onTap={this.handleHeaderClick}>{slotTitle || title}</div>
            }

            {headerExtra ? (
                    <div class={[`${prefixCls}-header-extra`, { [`${prefixCls}-header-slotHeader`]: header }]} onTap={this.handleExtraClick}>{headerExtra}</div>
            ) : null}
          </div>
        </div>
      )
    }


      {!onlyHeader && <div class={`${prefixCls}-body`}> {def} </div>}

      <div class={`${prefixCls}-footer`}>
        { footer && <div class={`${prefixCls}-footer-content`}>{footer}</div>}
        {footerExtra && <div class={`${prefixCls}-footer-extra`}>{footerExtra}</div>}
      </div>
    </div>;
  },
};

</script>
